<template>
  <div class="iconswrap">
    <div class="icon-item" v-for="item of iconsList" :key="item.id">
      <div class="icon-img">
        <img :src="item.url" alt="">
        <span v-if="item.discount !== ''">{{item.discount}}</span>
      </div>
      <p>{{item.desc}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Iconswrap',
  props: {
    iconsList: Array
  }
}
</script>

<style lang="stylus" scoped>
  .iconswrap
    width 100%
    min-height 220px
    display flex
    justify-content space-around
    align-items center
    text-align center
    overflow hidden
    .icon-img
      position relative
      span
        background red
        color #fff
        border-radius 20px
        padding 3px 4px
        position absolute
        top -10px
        right -35px
    p
      margin-top 20px

</style>
